<!-- brandSelect.vue -->
<template>
	<view>
		<!---
		<u-index-list :scrollTop="scrollTop">
			<view v-for="(item, index) in brandList" :key="index">
				<u-index-anchor :index="item.letter" />
				<view v-for="brand in item.brands" :key="brand.id" @click="selectBrand(brand)">
					<u-cell :title="brand.name" />
				</view>
			</view>
		</u-index-list>-->


		<u-index-list :scrollTop="scrollTop">
			<view v-for="(item, index) in brandList" :key="index">
				<u-index-anchor :index="item.letter" />
				<view class="list-cell u-border-bottom" v-for="(item1, index) in item.data" :key="index"
					@click="selectBrand(item1)">
					{{item1.name}}
				</view>
			</view>
		</u-index-list>

	</view>
</template>

<script>
	// var brandList =[];
	// var letterArr = brandList.list.map(val => {
	// 	return val.letter;
	// })
	export default {

		data() {
			return {
				scrollTop: 0,
				brandList: [],
				letterArr: [],
			};
		},
		methods: {
			selectBrand(brand) {
				 
					uni.$emit('brandSelected', brand);	
				uni.navigateBack();		
			},
			async fetchBrands() {
				try {
					//console.log("50");
					const response = await this.$api.getBrands(); // 假设有一个 getBrands 方法来获取品牌数据
					if (response.code === 200) {
						this.brandList = response.data;
						console.log(this.brandList);
						this.letterArr = this.brandList.map(val => {
							//console.log(val);
							return val.letter;
						})
					} else {
						this.$u.toast('获取品牌数据失败');
					}
				} catch (error) {
					console.error('获取品牌数据时出错:', error);
					this.$u.toast('获取品牌数据时出错');
				}
			}
		},
		onLoad() {
			this.fetchBrands();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	};
</script>

<style lang="scss" scoped>
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: $u-content-color;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}
</style>